import React, { Component } from 'react'
import { Image } from 'react-vant'

class Right extends Component {

    componentDidUpdate() {
        this.myRef.children[this.props.i].scrollIntoView({behavior: 'smooth'})
    }

    clickDetail(id) {
        console.log(this.props)
        this.props.history.push({
            pathname: '/detail',
            state: {
                id
            },
        })
    }

    render() {
        let { list } = this.props
        return (
            <div className='right' ref={(ref) => {
                this.myRef = ref
            }}>
                {
                    list && list.length ? list.map((item, index) => {
                        return (
                            <div key={index}>
                                <h2>{item.title}</h2>
                                <ul>
                                    {
                                        item.children && item.children.length ? item.children.map((val, key) => {
                                            return (
                                                <li key={key} onClick={
                                                    this.clickDetail.bind(this, val.id)
                                                }>
                                                    <Image className='lazy-img' lazyload src={val.img} key={val.img}/>
                                                    <p>{val.name}</p>
                                                </li>
                                            )
                                        }) : ''
                                    }
                                </ul>
                            </div>
                        )
                    }) : ''
                }
            </div>
        )
    }
}

export default Right;